<template>
  <div id="catalog">
    <el-collapse v-model="activeNames" class="catalogue" @change="handleChange">
      <el-collapse-item class="catlogue_left" name="1">
        <template slot="title">
          <svg
            t="1665389231751"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="15999"
            width="16"
            height="16"
          >
            <path
              d="M211.828364 23.272727C146.245818 23.272727 93.090909 77.963636 93.090909 145.454545v733.09091c0 67.490909 53.154909 122.181818 118.737455 122.181818H805.701818c65.582545 0 125.253818-54.690909 125.253818-122.181818V238.312727L727.831273 23.272727H211.874909zM686.545455 93.090909l174.545454 174.545455h-146.013091a28.532364 28.532364 0 0 1-28.532363-28.532364V93.090909z m116.363636 837.818182H221.090909c-32.116364 0-58.181818-26.810182-58.181818-59.810909V152.901818C162.909091 119.901091 188.974545 93.090909 221.090909 93.090909h407.272727v179.525818c0 33.047273 26.065455 59.857455 58.181819 59.857455h174.545454v538.624c0 33.000727-26.065455 59.810909-58.181818 59.810909zM554.821818 407.272727H259.677091c-15.825455-1.861818-27.554909-16.849455-26.810182-34.210909-1.536-17.826909 10.426182-33.745455 26.810182-35.607273h295.191273c16.430545 1.861818 28.346182 17.780364 26.810181 35.607273 0.791273 17.361455-10.984727 32.349091-26.810181 34.210909z m209.826909 174.545455H259.351273c-15.499636-3.351273-26.624-17.966545-26.624-34.909091s11.124364-31.557818 26.530909-34.909091h505.483636c15.453091 3.351273 26.530909 17.966545 26.530909 34.909091s-11.077818 31.557818-26.530909 34.909091h-0.093091z m0 174.545454H259.351273C243.851636 753.012364 232.727273 738.397091 232.727273 721.454545s11.124364-31.557818 26.530909-34.90909h505.483636c15.453091 3.351273 26.530909 17.966545 26.530909 34.90909s-11.077818 31.557818-26.530909 34.909091h-0.093091z"
              p-id="16000"
              fill="#00e0f6"
            ></path>
          </svg>
          <!-- <i :class="judgeActive('1')!==-1? 'downArrow2':'downArrow1'"></i> -->
          <div v-show="activeNames[0] == 1" style="display: flex">
            <svg
              t="1665452307912"
              class="icon zhuan"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6927"
              width="16"
              height="16"
            >
              <path
                d="M544.02 156.2l-64.04-56.4-363.75 413.02 363.81 411.44 63.92-56.52-313.93-355.03z"
                p-id="6928"
                fill="#00e0f6"
              ></path>
              <path
                d="M881.09 156.2l-64.04-56.4-363.76 413.02L817.1 924.26l63.93-56.52L567.1 512.71z"
                p-id="6929"
                fill="#00e0f6"
              ></path>
            </svg>
          </div>
          <div v-show="activeNames[0] != 1" style="display: flex">
            <svg
              t="1665452307912"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6927"
              width="16"
              height="16"
            >
              <path
                d="M544.02 156.2l-64.04-56.4-363.75 413.02 363.81 411.44 63.92-56.52-313.93-355.03z"
                p-id="6928"
                fill="#00e0f6"
              ></path>
              <path
                d="M881.09 156.2l-64.04-56.4-363.76 413.02L817.1 924.26l63.93-56.52L567.1 512.71z"
                p-id="6929"
                fill="#00e0f6"
              ></path>
            </svg>
          </div>
        </template>
        <div class="xuxa_input">
          <input type="text" id="test" placeholder="" />
          <button class="button_time">
            <svg
              t="1665383768666"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11664"
              width="16"
              height="16"
            >
              <path
                d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z"
                fill="#fff"
                p-id="11665"
              ></path>
            </svg>
          </button>
        </div>
        <div class="over_auto">
          <div class="organization_configuration">
            <el-tree
              node-key="id"
              ref="tree"
              :data="data"
              :props="defaultProps"
              @node-click="dropdown_switch"
              :default-expanded-keys="expandeds"
              highlight-current
              auto-expand-parent
            ></el-tree>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  name: "catalogueView",
  data() {
    return {
      activeNames: ["1"],
      lincun: "",
      data: [
        {
          // 采集汇报
          label: "数据接引",
          id: "1",
          children: [
            {
              label: "数据源配置",
              id: "101",
              routers: "/collectionreport/connection",
            },
            {
              label: "接引配置",
              id: "102",

              routers: "/collectionreport/dataccess",
            },
            {
              label: "接引状态管理",
              routers: "/collectionreport/status",
              id: "103",
              children: [
                {
                  label: "太阳监测数据",
                  type: "TKHJSUN",
                  id: "10301",
                  sort: "1",
                },
                {
                  label: "行星际空间监测数据",
                  type: "TKHJINTE",
                  id: "10302",
                  sort: "2",
                },
                {
                  label: "地球磁层监测数据",
                  type: "TKHJMAG",
                  id: "10303",
                  sort: "3",
                },
                {
                  label: "中高层大气监测数据",
                  type: "TKHJATMO",
                  id: "10304",
                  sort: "4",
                },
                {
                  label: "电离层监测数据",
                  type: "TKHJIONO",
                  id: "10305",
                  sort: "5",
                },
                {
                  label: "地磁监测数据",
                  type: "TKHJGEOMAG",
                  id: "10306",
                  sort: "6",
                },
                {
                  label: "宇宙线监测数据",
                  type: "TKHJCOSMIC",
                  id: "10307",
                  sort: "7",
                },
                {
                  label: "效应数据",
                  type: "TKHJEFFECT",
                  id: "10308",
                  sort: "8",
                },
                {
                  label: "产品类数据",
                  type: "TKHJPROD",
                  id: "10309",
                  sort: "9",
                },
              ],
            },
          ],
        },
        {
          // 整合治理
          label: "数据治理",
          id: "2",
          children: [
            {
              label: "治理方案配置",
              id: "201",
              routers: "/about/cleaningdetection",
            },
            {
              label: "特征提取监管",
              id: "202",
              routers: "/about/cleaningproblems",
            },
            {
              label: "数据关联配置",
              id: "203",
              // routers: "/about/convergenceassociation",
              children: [
                {
                  label: "X射线耀斑",
                  // usname: "inFormation",
                  id: "20301",
                  conver: "1",
                },
                {
                  label: "质子事件",
                  // usname: "inFormation",
                  id: "20302",
                  conver: "2",
                },
                {
                  label: "地磁暴",
                  // usname: "inFormation",
                  id: "20303",
                  conver: "3",
                },
                {
                  label: "高能电子暴",
                  // usname: "inFormation",
                  id: "20304",
                  conver: "4",
                },
                {
                  label: "电离层暴",
                  // usname: "inFormation",
                  id: "20305",
                  conver: "5",
                },
              ],
            },
            {
              label: "治理状态监管",
              id: "204",
              routers: "/about/governanceStatus",
            },
            {
              label: "治理问题清单",
              id: "205",
              routers: "/about/governanceIssues",
            },
          ],
        },
        {
          // 数据管理
          label: "数据管理",
          id: "3",
          // routers: "/datamanag",
          children: [
            {
              label: "数据维护",
              id: "301",
              children: [
                {
                  label: "太阳日冕层 SDO AIA 131 观测",
                  id: "30101",
                  safeguard: "1",
                  routers: "/datamanag/datasafeguard/SdoAia131Image",
                },
                {
                  label: "太阳日冕层 SDO AIA 171 观测",
                  id: "30102",
                  safeguard: "2",
                  routers: "/datamanag/datasafeguard/SdoAia171Image",
                },
                {
                  label: "太阳日冕层 SDO AIA 193 观测",
                  id: "30103",
                  safeguard: "3",
                  routers: "/datamanag/datasafeguard/SdoAia193Image",
                },
                {
                  label: "太阳磁场",
                  id: "30104",
                  safeguard: "4",
                  routers: "/datamanag/datasafeguard/SdoHmiImage",
                },
                {
                  label: "高能电子通量",
                  id: "30105",
                  safeguard: "5",
                  routers: "/datamanag/datasafeguard/ElectronFlux",
                },
                {
                  label: "高能质子积分通量",
                  id: "30106",
                  safeguard: "6",
                  routers: "/datamanag/datasafeguard/ProtonFlux",
                },
                {
                  label: "高能质子微分通量",
                  id: "30107",
                  safeguard: "7",
                  routers: "",
                },
                {
                  label: "太阳X射线",
                  id: "30108",
                  safeguard: "8",
                  routers: "/datamanag/datasafeguard/XRay",
                },
                {
                  label: "太阳风参数",
                  id: "30109",
                  safeguard: "9",
                  routers: "/datamanag/datasafeguard/SolarWind",
                },
                {
                  label: "行星际磁场强度",
                  id: "30110",
                  safeguard: "10",
                  routers: "/datamanag/datasafeguard/IntMag",
                },
                {
                  label: "地磁Kp指数",
                  id: "30111",
                  safeguard: "11",
                  routers: "",
                },
                {
                  label: "地磁Ap指数",
                  id: "30112",
                  safeguard: "12",
                  routers: "",
                },
                {
                  label: "地磁Dst指数",
                  id: "30113",
                  safeguard: "13",
                  routers: "",
                },
                {
                  label: "电离层参数现报",
                  id: "30114",
                  safeguard: "14",
                  routers: "",
                },
                {
                  label: "太空环境警报",
                  id: "30115",
                  safeguard: "15",
                  routers: "",
                },
                {
                  label: "太空环境日报",
                  id: "30116",
                  safeguard: "16",
                  routers: "",
                },
                {
                  label: "太空环境周报",
                  id: "30117",
                  safeguard: "17",
                  routers: "",
                },
                {
                  label: "太空环境通报",
                  id: "30118",
                  safeguard: "18",
                  routers: "",
                },
                {
                  label: "F10.7 预报",
                  id: "30119",
                  safeguard: "19",
                  routers: "",
                },
                {
                  label: "Ap 预报",
                  id: "30120",
                  safeguard: "20",
                  routers: "",
                },
                {
                  label: "FoF2 预报",
                  id: "30121",
                  safeguard: "21",
                  routers: "",
                },
                {
                  label: "电离层闪烁 S4 观测数据",
                  id: "30122",
                  safeguard: "22",
                  routers: "/datamanag/datasafeguard/ScintS4",
                },
                {
                  label: "电离层短波通信频率产品",
                  id: "30123",
                  safeguard: "23",
                  routers: "",
                },
                {
                  label: "天基环境载荷数据",
                  id: "30124",
                  safeguard: "24",
                  routers: "/datamanag/datasafeguard/KjzElectronProtonFlux",
                },
                {
                  label: "CME 事件特征参数数据",
                  id: "30125",
                  safeguard: "25",
                  routers: "",
                },
              ],
            },
            {
              label: "统计报表",
              id: "302",
              routers: "/datamanag/statisticalreport",
            },
            {
              label: "数据状态",
              id: "303",
              routers: "/datamanag/datastatus",
            },
            {
              label: "维护日志",
              id: "304",
              routers: "/datamanag/dailyrecord",
            },
          ],
        },
        {
          //数据服务
          label: "数据服务",
          id: "4",
          children: [
            {
              label: "太阳监测数据",
              id: "401",
              children: [
                {
                  label: "太阳日冕层SDO AIA 131观测",
                  routers: "/dataservices/ImagePlayer",
                  id: "40101",
                  key: "SDO_131",
                },
                {
                  label: "太阳日冕层SDO AIA 171观测",
                  routers: "/dataservices/ImagePlayer",
                  id: "40102",
                  key: "SDO_171",
                },
                {
                  label: "太阳日冕层SDO AIA 193观测",
                  routers: "/dataservices/ImagePlayer",
                  id: "40103",
                  key: "SDO_193",
                },
                {
                  label: "太阳磁场SDO HMI观测",
                  routers: "/dataservices/ImagePlayer",
                  id: "40104",
                  key: "SDO_HMI",
                },
                {
                  label: "太阳X射线",
                  id: "40105",
                  key: "SDO_XSHEXIAN",
                },
              ],
            },
            {
              label: "行星际空间监测数据",
              id: "402",
              children: [
                {
                  label: "太阳风参数",
                  id: "40201",
                  solarWind: "1",
                  routers: "/dataservices/SolarWind",
                },
              ],
            },
            {
              label: "辐射环境监测数据",
              id: "403",
              children: [
                {
                  label: "高能电子通量",
                  id: "40301",
                  radiation: "1",
                },
                {
                  label: "高能质子积分通量",
                  id: "40302",
                  radiation: "2",
                },
                {
                  label: "高能质子微分通量",
                  id: "40303",
                  radiation: "3",
                },
              ],
            },
            {
              label: "电离层监测数据",
              id: "404",
              children: [
                {
                  label: "电离层闪烁S4观测数据",
                  id: "40401",
                  ionizedLayer: "1",
                },
                {
                  label: "电离层短波通信频率产品",
                  id: "40402",
                  ionizedLayer: "2",
                },
              ],
            },
            {
              label: "地磁环境监测数据",
              id: "405",
              children: [
                {
                  label: "地磁Kp指数",
                  id: "40501",
                  GeomagneticRing: "1",
                },
                {
                  label: "地磁Ap指数",
                  id: "40502",
                  GeomagneticRing: "2",
                },
                {
                  label: "地磁Dst指数",
                  id: "40503",
                  GeomagneticRing: "3",
                },
              ],
            },
            {
              label: "天基载荷数据数据",
              id: "406",
              children: [
                {
                  label: "天基载荷数据",
                  id: "40601",
                  SpaceBased: "1",
                },
              ],
            },
            {
              label: "产品类数据",
              id: "407",
              children: [
                {
                  label: "F10.7预报",
                  id: "40701",
                  product: "1",
                },
                {
                  label: "Ap预报",
                  id: "40702",
                  product: "2",
                },
                {
                  label: "Fof2预报",
                  id: "40703",
                  product: "3",
                },
                {
                  label: "太空环境警报",
                  id: "40704",
                  product: "4",
                },
                {
                  label: "太空环境日报",
                  id: "40705",
                  product: "5",
                },
                {
                  label: "太空环境周报",
                  id: "40706",
                  product: "6",
                },
                {
                  label: "太空环境通报",
                  id: "40707",
                  product: "7",
                },
                {
                  label: "电离层参数现报",
                  id: "40708",
                  product: "8",
                },
                {
                  label: "CME事件特征参数数据",
                  id: "40709",
                  product: "9",
                },
              ],
            },
          ],
        },
        {
          // 智能应用
          label: "智能应用",
          id: "5",
          children: [
            {
              label: "事件复盘",
              id: "501",
              routers: "/eventReview",
              children: [
                {
                  label: "穿越南大西洋异常区",
                  routers: "/eventReview/thirdScene",
                  id: "50101",
                  event: "SAA",
                },
                {
                  label: "磁层顶穿越",
                  routers: "/eventReview/thirdScene",
                  id: "50102",
                  event: "Mag",
                },
              ],
            },
            {
              label: "故障异常诊断",
              id: "502",
              routers: "/eventReview/thirdScene",
              // key: "FaultDiagnosis",
            },
          ],
        },
      ],
      expandeds: ["1"], // 默认展开
      defaultCheck: ["1"], // 默认选中
      currentCheck: "", // 当前选中
      defaultProps: {
        children: "children", //children 是什么数据的节点就用什么渲染
        label: "label",
      },
    };
  },
  created() {
    this.$nextTick(function () {
      this.$refs.tree.setCurrentKey("101");
    });
  },
  props: {
    expanded: Array,
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    dropdown_switch(item) {
      // this.$refs.tree.setCurrentKey(item.id);
      // console.log("测试", item);
      if (item.sort) {
        // console.log("你好", item);
        this.$router.push({
          path: "/collectionreport/status",
          query: { item: item.sort },
        });
        this.lincun = "接引状态管理";
      } else if (item.conver) {
        // console.log("去数据关联配置", item.conver);
        this.$router.push({
          path: "/about/convergenceassociation",
          query: { item: item.conver, data: item.label },
        });
        this.lincun = "数据关联配置";
      } else if (item.key) {
        // console.log(item);
        this.$router.push({ path: item.routers, query: { key: item.key } });
      } else if (item.safeguard) {
        this.$router.push({ path: item.routers });
        this.lincun = "数据维护";
      } else if (item.solarWind) {
        this.$router.push({ path: item.routers });
        this.lincun = "行星际空间监测数据";
      } else if (item.radiation) {
        this.$router.push({ path: item.routers });
        this.lincun = "辐射环境监测数据";
      } else if (item.ionizedLayer) {
        this.$router.push({ path: item.routers });
        this.lincun = "电离层监测数据";
      } else if (item.GeomagneticRing) {
        this.$router.push({ path: item.routers });
        this.lincun = "地磁环境监测数据";
      } else if (item.SpaceBased) {
        this.$router.push({ path: item.routers });
        this.lincun = "天基载荷数据数据";
      } else if (item.product) {
        this.$router.push({ path: item.routers });
        this.lincun = "产品类数据";
      } else if (item.event) {
        this.$router.push({ path: item.routers });
        this.lincun = "事件复盘";
      } else if (item.routers) {
        console.log("我走的是routers");
        this.$router.push({ path: item.routers });
        this.lincun = item.label;
      } else {
        console.log(item, "当前点击的");
        this.lincun = item.label;
      }
      this.$emit("message", this.lincun);
    },
  },
  watch: {
    expanded: {
      handler(newValue, oldValue) {
        // this.hanshu(newValue)
        console.log("新的", newValue);
        console.log("旧的", oldValue);
        console.log(newValue == oldValue);
        this.expandeds = newValue;
      },
      deep: true,
    },
    $route: {
      handler: function (val) {
        // 监听路由变换 当路由发生改变时 遍历整个数据
        this.data.forEach((value) => {
          if (value.routers == val.path) {
            // 根据定义的路由地址与去到的路由地址进行比较
            this.$refs.tree.setCurrentKey(value.id); // 如果值相同则将其选中
            return;
          } else {
            // 如没有匹配到相同的值，则继续遍历其子级字段
            value.children.forEach((item) => {
              if (item.routers == val.path) {
                // 继续匹配
                this.expandeds.push(value.id); // 如匹配成功 先将其父节点的id设置为展开状态
                this.$refs.tree.setCurrentKey(item.id); // 并将匹配成功的值选中
                return;
              } else {
                // 重复其上一级操作
                if (item.children) {
                  item.children.forEach((arrs) => {
                    if (arrs.routers == val.path) {
                      this.expandeds.push(value.id);
                      this.expandeds.push(item.id);
                      this.$refs.tree.setCurrentKey(arrs.id);
                      return;
                    }
                  });
                }
              }
            });
          }
        });
      },
      // 深度观察监听
      deep: true,
    },
  },
};
</script>
<style lang="scss">
#catalog {
  width: 100%;
  height: 30px;
  margin-left: 16px;
  font-size: 18px;
  font-weight: normal;
  color: #fff !important;
  font-family: "宋体";
  border: none !important;
  background: #0077a9;
  // position: absolute;           // 如果需要home部分完全占领页面除title时 启用该定位 如果不需要 前往App.vue 将home_body 打开
  .catalogue {
    border: none !important;
    .catlogue_left {
      background: #0077a9;
      .xuxa_input {
        display: flex;
        width: 227px;
        height: 30px;
        border: 1px solid #034866;
        margin: 20px auto;
        #test {
          border: none;
          background: transparent;
          padding: 0 10px;
          color: #c4d1dd;
        }
        input::-webkit-input-placeholder {
          color: #c4d1dd;
          font-size: 12px;
        }
        #test:focus {
          outline: none;
        }
        button {
          border: none;
          padding: 0 10px;
          background: transparent;
        }
      }
      .over_auto {
        height: 70vh;
        overflow: auto;
      }
      .el-collapse-item__header {
        padding: 0 10px !important;
        background: #0077a9;
        border: none !important;
        justify-content: space-between;
        height: 30px;
        .el-collapse-item__arrow {
          display: none;
        }
      }
      .el-collapse-item__wrap {
        border: none !important;
        background: #000;
        .el-collapse-item__content {
          height: 75vh !important;
          border: 1px solid #0177a7;
          background: #000 !important;
          .el-tree {
            background: transparent;
            color: #fff;
            .el-icon-caret-right:before {
              font-size: 18px;
              color: #00e0f6;
            }
            .el-tree-node__label {
              font-size: 18px;
              color: #fff;
            }
          }
        }
        .el-tree-node__content:hover,
        .el-upload-list__item:hover {
          background-color: #0077a9 !important;
        }
        .el-tree-node:focus > .el-tree-node__content {
          background-color: #0077a9 !important;
        }
        .el-tree ::v-deep .el-tree-node__expand-icon.expanded {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
      }
    }
  }

  //头部穿透，让头部内容在两端，本身固有属性是flex
  ::v-deep .el-collapse-item__header {
    justify-content: space-between;
  }
  .zhuan {
    transform: rotate(-90deg);
  }
}
.organization_configuration {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    // 设置颜色
    background-color: #0077a9 !important; // 透明度为0.2的skyblue，作者比较喜欢的颜色
    color: #409eff; // 节点的字体颜色
    font-weight: bold; // 字体加粗
  }
}
</style>